const path = require('path')
// yarn add extract-text-webpack-plugin@next  不然报错
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin')

module.exports = {
  mode: 'development',
  entry: {
    app: './src/app.js'
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: './dist/',
    filename: '[name].bundle.js',
    chunkFilename: '[name].chunk.js'
  },
  module: {
    rules: [
      {
        test: /\.less$/,
        // use中的loader是按照从后前处理
        use: ExtractTextWebpackPlugin.extract({
          // 应用于当 CSS 没有被提取(也就是一个额外的 chunk，当 allChunks: false)
          fallback: {
            loader: 'style-loader',
            options: {
              // 是否只使用一个style 标签
              singleton: true,
              transform: './css.transform.js'
            }
          },
          use: [
            {
              loader: 'css-loader',
              options: {
                // minimize: true, // 压缩代码
                modules: true, // 启用css-modules
                localIdentName: '[path][name]_[local]--[hash:base64:5]'
              }
            }, 
            // postcss 配置放在css-loader 与 预编译css（less,sass）之间
            {
              loader: 'postcss-loader',
              options: {
                ident: 'postcss', // 通过indent 表明接下来使用的插件是给postcss使用
                plugins: [
                  // require('autoprefixer')(),
                  // cssnext 中包含autoprefixer
                  require('postcss-cssnext')()
                ]
              }
            }, {
              loader: 'less-loader'
            }
          ]
        })
      }
    ]
  },
  plugins: [
    new ExtractTextWebpackPlugin({
      // 提取后的css的名称
      filename: '[name].min.css',
      allChunks: false // false 只会提取初始化时候的css，true会提取所有的css样式，包括异步加载的
    })
  ]
}